<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>005-CSS 列表</title>
		<style>
			ul.a {
				list-style-type: circle; /* 圆点 */
			}

			ul.b {
				list-style-type: square; /* 方块 */
			}

			ol.c {
				list-style-type: upper-roman; /* 罗马数字大写 */
			}

			ol.d {
				list-style-type: lower-alpha; /* 字母小写 */
			}

			.e {
				list-style-image: url('https://avatars.githubusercontent.com/u/45627134?v=4'); /* 作为列表项标记的图像 */
			}

			.f {
				list-style-type: cjk-ideographic; /* 中文序号列表 */
			}

			.g {
				list-style-type: decimal; /* 数字序号列表 */
			}

			.demo {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<p>无序列表实例:</p>

		<ul class="a">
			<li>Coffee</li>
			<li>Tea</li>
			<li>Coca Cola</li>
		</ul>

		<ul class="b">
			<li>Coffee</li>
			<li>Tea</li>
			<li>Coca Cola</li>
		</ul>

		<p>有序列表实例:</p>

		<ol class="c">
			<li>Coffee</li>
			<li>Tea</li>
			<li>Coca Cola</li>
		</ol>

		<ol class="d">
			<li>Coffee</li>
			<li>Tea</li>
			<li>Coca Cola</li>
		</ol>

		<p>作为列表项标记的图像:</p>

		<ul class="e">
			<li>Coffee</li>
			<li>Tea</li>
			<li>Coca Cola</li>
		</ul>

		<p>中文序号列表实例:</p>

		<ul class="f">
			<li>Coffee</li>
			<li>Tea</li>
			<li>Coca Cola</li>
		</ul>

		<p>数字序号列表实例:</p>

		<ul class="g">
			<li>Disc type</li>
			<li>Tea</li>
			<li>Coca Cola</li>
		</ul>

		<p>移除默认设置（符号和内外边距）</p>

		<ul class="demo">
			<li>Coffee</li>
			<li>Tea</li>
			<li>Coca Cola</li>
		</ul>
	</body>
</html>
